<template>
  <div class="min-h-screen flex flex-col items-center justify-center bg-gradient-to-br from-blue-200 via-purple-100 to-pink-100 px-4">
    <!-- 顶部用户栏 -->
    <div v-if="isLogin" class="fixed top-0 left-0 w-full flex justify-end items-center px-8 py-4 z-20">
      <div class="flex items-center gap-3 bg-white/80 rounded-full px-4 py-2 shadow-md backdrop-blur-md">
        <span class="text-purple-700 font-semibold text-base flex items-center">
          <i class="i-mdi-account-circle text-xl mr-1"></i>
          {{ userStore.userInfo?.userName || userStore.userInfo?.username || '用户' }}
        </span>
        <n-button size="small" type="error" class="ml-2" @click="logout">退出登录</n-button>
      </div>
    </div>
    <transition name="fade">
      <n-card class="w-full max-w-3xl text-center py-12 shadow-xl rounded-3xl bg-white/80 backdrop-blur-md border-0" title="">
        <div class="flex flex-col items-center mb-8">
          <img src="/vite.svg" alt="SmartInput Logo" class="w-20 h-20 mb-4 drop-shadow-lg animate-bounce-slow" />
          <h1 class="text-3xl font-extrabold text-purple-700 mb-2 tracking-tight">欢迎使用 SmartInput</h1>
          <p class="mb-2 text-gray-500 text-lg">智能输入平台，支持多端协同与语音识别。</p>
          <p class="mb-4 text-gray-400 text-sm">高效 · 智能 · 便捷</p>
        </div>
        <n-space vertical :size="18">
          <template v-if="!isLogin">
            <router-link to="/login">
              <n-button type="primary" block class="home-btn" icon="login-outline">登录</n-button>
            </router-link>
            <router-link to="/register">
              <n-button secondary block class="home-btn" icon="person-add-outline">注册</n-button>
            </router-link>
          </template>
          <template v-else>
            <router-link to="/devices">
              <n-button quaternary block class="home-btn" icon="hardware-chip-outline">设备管理</n-button>
            </router-link>
            <router-link to="/voice">
              <n-button quaternary block class="home-btn" icon="mic-outline">语音识别</n-button>
            </router-link>
            <router-link to="/notifications">
              <n-button quaternary block class="home-btn" icon="notifications-outline">通知中心</n-button>
            </router-link>
          </template>
        </n-space>
        <div class="mt-10 text-xs text-gray-400">© 2024 SmartInput · 智能输入平台</div>
      </n-card>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from '../store/user';
import { computed } from 'vue';
import { useRouter } from 'vue-router';

const userStore = useUserStore();
const isLogin = computed(() => !!userStore.token);
const router = useRouter();

function logout() {
  userStore.logout();
  router.push('/login');
}
</script>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.6s cubic-bezier(0.4,0,0.2,1);
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

.home-btn {
  font-size: 1.1rem;
  font-weight: 500;
  transition: transform 0.15s, box-shadow 0.15s;
  border-radius: 1.5rem;
  box-shadow: 0 2px 8px 0 rgba(120, 80, 200, 0.06);
}
.home-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 4px 16px 0 rgba(120, 80, 200, 0.12);
}

@media (max-width: 600px) {
  .n-card {
    padding: 1.5rem 0.5rem !important;
  }
  h1 {
    font-size: 1.5rem;
  }
  .home-btn {
    font-size: 1rem;
  }
}

.animate-bounce-slow {
  animation: bounce 2.5s infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
</style> 